<!DOCTYPE html>
<html lang="zh_CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文件管理</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="/element-ui/index.css">
  <style>
    .el-table .warning-row {
      background: oldlace;
    }

    .el-table .success-row {
      background: #f0f9eb;
    }

    .image {
      max-width: 200px;
      height: auto;
    }
  </style>
</head>

<body>
  <div id="app">
    <div style="display:flex;justify-content: center; align-items:center;flex-direction: column;">
      <div style="margin: 10px;">
        <el-upload class="upload-demo" action="/upload" :on-preview="handlePreview"
          :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3" :on-exceed="handleExceed"
          :file-list="fileList" :on-success="successFileUpload">
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </div>

      <el-table :data="tableData" border fit highlight-current-row style="width: 80%"
        :row-class-name="tableRowClassName">
        <el-table-column prop="id" label="id" width="180" align="center">
        </el-table-column>
        <el-table-column prop="originName" label="原名称" width="180" align="center">
        </el-table-column>
        <el-table-column prop="url" label="访问地址" align="center">
          <template slot-scope="scope">
            <el-image style="width: 200px; height: auto" :src="'http://192.168.0.103:7003/'+scope.row.url"
              :preview-src-list="srcList">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180" align="center" :formatter="dataformater">
        </el-table-column>
        <el-table-column prop="updateTime" label="更新时间" width="180" align="center" :formatter="dataformater">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleListRemove(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination layout="prev, pager, next" :total="total" :current-page="currentPage" :page-size="pageSize"
          @current-change="currentPageChange">
        </el-pagination>
      </div>
    </div>

    <!-- {{srcList.length}} -->


  </div>
</body>
<!-- import Vue before Element -->
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="/vue/vue.min.js"></script>
<!-- import JavaScript -->
<script src="/element-ui/index.js"></script>
<script src="/js/moment.js"></script>


<script>
  new Vue({
    el: '#app',
    data() {
      return {
        fileList: [],
        tableData: [],
        total: 50,
        currentPage: 0,
        pageSize: 5,
        srcList: []
      };
    },
    mounted() {
      this.getTableData()
    },
    methods: {
      dataformater(row, column) {
        const date = row[column.property]
        if (date === undefined) {
          return ""
        }

        return moment(date).format("YYYY-MM-DD HH:mm:ss")
      },
      handleRemove(file, fileList) {
        // console.log(file, fileList);
      },
      handlePreview(file) {
        // console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${file.name}？`);
      },
      successFileUpload(response, file, fileList) {
        // console.log("successFileUpload ===> ", response, file, fileList)
        this.currentPage = 1
        this.getTableData()
      },
      tableRowClassName({ row, rowIndex }) {
        if (rowIndex % 3 === 1) {
          return 'warning-row';
        } else if (rowIndex % 3 === 2) {
          return 'success-row';
        }
        return '';
      },

      handleListRemove(row) {
        console.log(row.url)
        const fileId = row.url
        const that = this
        //请求的网址
        const url = "/remove?fileId=" + fileId;
        //发起get请求
        fetch(url, { method: "post" }).then(function (response) {
          // 使用return 将数据返回对象。
          return response.json();
        }).then(function (data) {
          that.currentPage = 1
          that.getTableData()
        }).catch(function (ex) {
          console.log('parsing failed', ex)
        })
      },
      currentPageChange(current) {
        this.currentPage = current;
        this.getTableData()
      },
      getTableData() {
        const that = this
        //请求的网址
        const url = "/list?page=" + this.currentPage + "&size=" + this.pageSize;
        //发起get请求
        fetch(url).then(function (response) {
          // 使用return 将数据返回对象。
          return response.json();
        }).then(function (data) {
          // console.log('返回json数据', data, data.data.content);
          that.tableData = data.data.content
          that.total = data.data.totalElements
          // console.log("'返回json数据'", that.tableData)
          that.srcList = []
          that.tableData.forEach(item => {
            that.srcList.push('http://192.168.0.103:7003/' + item.url)
          });
        }).catch(function (ex) {
          console.log('parsing failed', ex)
        })
      }
    },
  })
</script>

</html>